<template>
	<view class="main">
		<!-- #ifndef MP-TOUTIAO -->
		<!-- <nav-bar ref="navRef" title="支付"></nav-bar> -->
		<!-- #endif -->

		<!-- 图片上传 、 canvas 选取 -->
		<uploadContainer type="3" :uploadImgSrc="uploadImgSrc" :uploadImgInfo="uploadImgInfo" @updateImgInfo="updateImgInfo" @clearImg="clearImg" />
		<!-- 图片上传 、 canvas 选取 -->

		<view class="content">
			<view class="row" v-if="query.mode == 2">
				<view class="label">消除模式</view>
				<view class="value tabs flex">
					<view @tap.stop="changeMode(idx)" :class="['tab_item flex_center', modeType === idx ? 'act_tab_item' : '']" v-for="(tab, idx) in ['涂抹', '快速选择']" :key="idx">
						<view class="">{{ tab }}</view>
					</view>
					<view class="tab_bar" :style="{ 'transform': `translateX(calc(${modeType * 100}% + ${modeType ? '8rpx' : ''}))` }"></view>
				</view>
			</view>

			<view class="row" v-if="query.mode == 2">
				<view class="label">涂抹尺寸</view>
				<view class="value flex">
					<view class="" style="width: 100%">
						<u-slider
							v-model="cvsSize"
							:step="20"
							:min="20"
							active-color="#444444"
							:block-style="{ border: '3px solid #444444', width: '30rpx', height: '30rpx', 'box-shadow': 'none' }"
						></u-slider>
					</view>
				</view>
			</view>
			<!-- 5材质替换 -->
			<view class="row row_a" v-if="['5'].includes(query.type)">
				<view class="label">指定位置</view>
				<view class="value items">
					<view :class="['item', form.selectedLabels === item ? 'act_item' : '']" v-for="(item, idx) in ['地板', '墙', '沙发', '衣柜', '橱柜', '床']" :key="idx">
						<view class="item_inner">
							<view class="">{{ item }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 9换门板 -->
			<block v-if="['9'].includes(query.type)">
				<view class="row row_a">
					<view class="label">替换区域</view>
					<view class="value items">
						<view :class="['item', doorForm.replaceTarget === item ? 'act_item' : '']" v-for="(item, idx) in ['橱柜', '衣柜']" :key="idx" @tap.stop="doorForm.replaceTarget = item">
							<view class="item_inner">
								<view class="">{{ item }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row row_a">
					<view class="label">替换范围</view>
					<view class="value items">
						<view
							:class="['item', doorForm.changeType === item.key ? 'act_item' : '']"
							v-for="(item, idx) in [
								{ name: '造型和材质', key: 'change_door' },
								{ name: '仅材质', key: 'change_door_material' }
							]"
							:key="item.key"
							@tap.stop="doorForm.changeType = item.key"
						>
							<view class="item_inner">
								<view class="">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</block>

			<!-- 4产品替换  5材质替换   7换涂料 8换瓷砖 9换门板 10换台面 -->
			<view class="row" v-if="['4', '5', '7', '8', '9', '10'].includes(query.type)">
				<view class="label">产品图</view>
				<view class="value product_value flex_bw">
					<!-- 未选 -->
					<view class="product_value_card empty flex_center" v-if="true">
						<image :src="$imgsUrl('0x72506301')" mode=""></image>
						<view class="">选产品图</view>
					</view>
					<!-- 已选 -->
					<view class="product_value_card product_value_info flex_bw" v-else>
						<view class="flex">
							<image src="https://static-test.jinzhuangli.com/upload/20250617/1934805043308535808.jpeg" mode=""></image>
							<view class="pvi_name u-line-1">产品名称产品产品名称产品产品名称产品</view>
						</view>
						<u-icon name="arrow-right" :size="28" color="#E7E8E9"></u-icon>
					</view>
					<!-- 示例 -->
					<view class="product_eg flex">
						<image :src="$imgsUrl('0x72506302')" mode=""></image>
						<view class="">使用示例</view>
					</view>
				</view>
			</view>

			<!-- 8换瓷砖 三维家接口暂时没有 -->
			<!-- <view class="row row_a" v-if="['8'].includes(query.type)" >
				<view class="label">替换区域</view>
				<view class="value items">
					<view :class="['item', idx === 0 ? 'act_item' : '']" v-for="(item, idx) in ['地面', '墙面']" :key="idx">
						<view class="item_inner">
							<view class="">{{ item }}</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="row row_a" v-if="['1', '2', '3', '6'].includes(query.type)">
				<view class="label">房间类型</view>
				<view class="value items">
					<view
						:class="['item', form.homeType === item ? 'act_item' : '']"
						v-for="(item, idx) in ['客厅', '卧室', '餐厅', '厨房', '书房', '衣帽间', '儿童房', '玄关', '卫生间', '阳台']"
						:key="idx"
						@tap.stop="form.homeType = item"
					>
						<view class="item_inner">
							<view class="">{{ item }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="row row_a" v-if="['1', '2', '3', '6'].includes(query.type)">
				<view class="label">家具风格</view>
				<view class="value items">
					<view
						:class="['item', form.furnitureType === item ? 'act_item' : '']"
						v-for="(item, idx) in ['现代', '简欧', '北欧', '中式', '日式', '欧式', '美式', '奶油风']"
						:key="idx"
						@tap.stop="form.furnitureType = item"
					>
						<view class="item_inner">
							<view class="">{{ item }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 改图- 三维家接口不支持 -->
			<view class="row row_a" v-if="query.mode == 1">
				<view class="label">生成张数</view>
				<view class="value items">
					<view :class="['item', form.batchCount === item ? 'act_item' : '']" v-for="(item, idx) in [1, 2, 3]" :key="idx" @tap.stop="form.batchCount = item">
						<view class="item_inner">
							<view class="">{{ item }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<view class="submit flex_center" @tap.stop="submit">生成</view>
		</view>
		<!-- 底部 -->
		<selectProductImg ref="selectProductImgRef" />
	</view>
</template>

<script>
import uploadContainer from "./modules/uploadContainer.vue";
import selectProductImg from "./modules/selectProductImg.vue";
import selectSpaceExample from "./modules/selectSpaceExample.vue";
export default {
	components: { uploadContainer, selectProductImg, selectSpaceExample },
	data() {
		return {
			//一级分类id
			classifyId: "1",
			classifyList: [
				{
					id: "1",
					name: "家装主材"
				},
				{
					id: "2",
					name: "全屋定制"
				},
				{
					id: "3",
					name: "软装家纺"
				},
				{
					id: "4",
					name: "辅材辅料"
				},
				{
					id: "5",
					name: "辅材辅料"
				},
				{
					id: "6",
					name: "辅材辅料"
				}
				// {
				// 	name:'家装主材'
				// }
			],
			// 0涂抹 1快速选择
			modeType: 0,
			// 涂抹尺寸
			cvsSize: 20,
			uploadImgSrc: "",
			form: {
				// 房间类型 mode == 1 ||
				homeType: "客厅",
				//家具风格 mode==1 ||
				furnitureType: "现代",

				test1: "",
				// 结构相似度 默认高
				test2: "",
				// 清除空间杂物 query.type --1 默认 是
				test3: "",
				// 替换目标 默认 台面
				// test4: ""
				// mode-1 生成数量
				batchCount: 1,
				// type-5 选择标签列表
				selectedLabels: "地板"
			},
			// type-10
			doorForm: {
				// 替换类型：change_door_material 替换材质；change_door 替换造型和材质；默认：change_door
				changeType: "change_door",
				// type-10 替换目标
				replaceTarget: "橱柜"
			},
			//上传的图片
			uploadImgInfo: {
				src: "",
				size: 0, //换算成 mb
				type: 0, //1视频 0图片
				status: "loading",
				process: "", // 上传成功的图片路径
				errorMsg: ""
			},
			query: {
				// 1画图 2改图
				mode: "2",
				// 1毛坯图生成 2软装搭配  3旧房改造  4产品替换  5材质替换  6家居背景替换 7换涂料 8换瓷砖 9换门板 10换台面
				type: "1"
			}
		};
	},
	onLoad(e) {
		console.log("query", e);
		// this.$refs.selectProductImgRef.open();
		e.mode ? (this.query = e) : "";
	},
	methods: {
		clearImg() {
			this.uploadImgInfo.src = "";
		},
		updateImgInfo(info) {
			this.uploadImgInfo = { ...info };
		},
		// 切换模式
		changeMode(idx) {
			this.modeType = idx;
		},
		submit() {
			if (!this.uploadImgInfo.process) {
				return uni.showToast({
					title: "请添加原图"
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-bottom: calc(84rpx + 32rpx + 52rpx + env(safe-area-inset-bottom) / 2);
}

.content {
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx 0 0 40rpx;
	font-size: 28rpx;
	color: #333333;
	.row.row_a {
		padding-bottom: 14rpx;
		padding-right: 0;
	}
	.row {
		display: flex;
		padding-bottom: 38rpx;
		padding-right: 50rpx;
		.items {
			display: flex;
			flex-wrap: wrap;
			color: #333333;
			font-size: 28rpx;
			.item.act_item {
				background: linear-gradient(49deg, rgba(72, 108, 246, 1), rgba(180, 88, 255, 1)) 0 0;
				.item_inner {
					font-weight: bold;
					background-color: #fbf6ff;
					view {
						background: linear-gradient(329deg, #486cf6 0%, #b458ff 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
			.item {
				background-color: #f7f8f9;
				border-radius: 8rpx;
				margin-bottom: 24rpx;
				margin-right: 20rpx;
				line-height: 62rpx;
				padding: 2rpx;
				transition: all 0.3s;
				.item_inner {
					padding: 0 38rpx;
					border-radius: 8rpx;
					width: 100%;
					height: 100%;
				}
			}
		}
		.product_value {
			.product_value_card {
				width: 306rpx;
				height: 62rpx;
				border-radius: 46rpx;
				border: 1px solid #e7e8e9;
			}
			.product_value_info {
				padding: 0 24rpx;
				.pvi_name {
					width: 186rpx;
				}
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;
					border-radius: 50%;
				}
			}
			.product_eg {
				color: #777777;
				image {
					width: 22rpx;
					height: 26rpx;
					margin-right: 8rpx;
				}
			}
			.empty {
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}
		}
		.label {
			width: 188rpx;
			line-height: 62rpx;
		}
		.tabs {
			background-color: #f4f5f6;
			padding: 4rpx;
			border-radius: 8rpx;
			position: relative;
			width: 100%;
			.tab_bar {
				position: absolute;
				background-color: #fff;
				width: calc(50% - 8rpx);
				height: calc(100% - 8rpx);
				border-radius: 8rpx;
				z-index: 1;
				transition: all 0.2s;
			}
			.act_tab_item {
				position: relative;
				z-index: 2;
				transition: all 0.4s;
				view {
					background: linear-gradient(329deg, #486cf6 0%, #b458ff 100%);
					font-weight: bold;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.tab_item {
				font-size: 30rpx;
				color: #777777;
				height: 62rpx;
				width: 50%;
			}
		}
		.value {
			width: calc(100% - 188rpx);
			min-height: 62rpx;
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 24rpx 46rpx calc(52rpx + env(safe-area-inset-bottom) / 2) 46rpx;
	z-index: 5;
	background-color: #ffffff;
	box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
	.submit {
		width: 100%;
		height: 84rpx;
		background: linear-gradient(89deg, #486cf6 0%, #b458ff 100%);
		border-radius: 8px 8px 8px 8px;
		color: #fff;
		font-size: 30rpx;
	}
}
</style>
